<template>
	<view class="addBankCard-wrap">
		<uni-forms label-width="100" :rules="rules" :value="formData" ref="form" err-show-type="toast">
			<uni-forms-item label="银行卡号" name="bankNo">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="22" v-model="formData.bankNo" placeholder="请输入卡号" />
			</uni-forms-item>

			<uni-forms-item label="开户行" name="openBank">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="255" v-model="formData.openBank" placeholder="请输入开户行" />
			</uni-forms-item>

			<uni-forms-item label="持卡人姓名" name="name">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="20" v-model="formData.name" placeholder="请输入持卡人姓名" />
			</uni-forms-item>

			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="11" type="number" v-model="formData.phone" placeholder="请输入手机号" />
			</uni-forms-item>
		</uni-forms>

		<u-bottom-button v-if="!id" value="添加银行卡" :disabled="disabled" @click="formSubmit(0)"></u-bottom-button>

		<u-bottom-button v-if="id" type="2" value1="删除银行卡" value2="修改银行卡" @clickOne="deleteDoctorBank" @clickTwo="formSubmit(1)"></u-bottom-button>
	</view>
</template>

<script>
import uniPopup from '@/components/uni/uni-popup/uni-popup.vue';
import uniEasyinput from '@/components/uni/uni-easyinput/uni-easyinput.vue';
import uniForms from '@/components/uni/uni-forms/uni-forms.vue';
import uniFormsItem from '@/components/uni/uni-forms-item/uni-forms-item.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
export default {
	components: {
		uniForms,
		uniFormsItem,
		uniEasyinput,
		uniPopup,
		uBottomButton
	},
	data() {
		return {
			id: null,
			disabled: true,

			rules: {
				name: {
					rules: [
						{
							required: true,
							message: '请填写持卡人姓名'
						}
					]
				},
				phone: {
					rules: [
						{
							required: true,
							message: '请填写手机号码'
						},
						{
							pattern: '^1[3456789]\\d{9}$',
							errorMessage: '请填写正确的手机号格式'
						}
					]
				},
				openBank: {
					rules: [
						{
							required: true,
							message: '请填写开户行'
						}
					]
				},
				bankNo: {
					rules: [
						{
							required: true,
							message: '请填写银行卡号'
						}
					]
				}
			},
			formData: {
				openBank: '',
				bankNo: '',
				name: '',
				phone: ''
			}
		};
	},
	onLoad(option) {
		this.id = option.id ? option.id : null;
	},
	onShow() {
		if (this.id) {
			this.queryDoctorBankById();
		}
	},
	methods: {
		//校验按钮
		checkDisabledBtn() {
			let b = false;
			Object.keys(this.formData).forEach(key => {
				if (this.formData[key] === '') {
					b = true;
				}
			});
			this.disabled = b;
		},
		
		
		//校验表单
		formSubmit(type) {
			this.$refs.form
				.submit()
				.then(res => {
					if (type == 0) {
						this.addDoctorBank();
					} else {
						this.editDoctorBank();
					}
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},
		
		//添加银行卡
		addDoctorBank() {
			this.$api
				.addDoctorBank({
					data: this.formData
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta:1
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},
		
		//删除银行卡
		deleteDoctorBank() {
			uni.showModal({
				title: '确认要删除该银行卡吗？',
				success: res => {
					if (res.confirm) {
						this.$api
							.deleteDoctorBank({
								params: {
									id: this.id
								}
							})
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									uni.navigateBack({
										delta:1
									});
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							});
					}
				}
			});
		},
		
		//银行卡详情
		queryDoctorBankById() {
			this.$api
				.queryDoctorBankById({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.formData = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},
		
		//修改银行卡信息
		editDoctorBank() {
			this.$api
				.editDoctorBank({
					data: this.formData
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta:1
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		}
	}
};
</script>

<style lang="less">
@import './addBankCard.less';
</style>
